<template>
  <div style="background-color: #fff">
    <div style="padding: 20px 0; background-color: #fff">
      <van-row>
        <van-col offset="1">
          <span
            class="familyname"
            :class="getBackgroundColor(statics.manager.id)"
            >{{ statics.manager.name.slice(0, 1) }}</span
          >
          <!-- <img width="67px" height="67px" style="border-radius:7px;" crossorigin="anonymous" :src="user.avatar" /> -->
        </van-col>
        <van-col offset="1">
          <van-row style="margin-bottom: 5px">
            <span
              style="
                display: block;
                color: #000;
                font-size: 18px;
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >{{ statics.manager.name }}</span
            >
          </van-row>
          <van-row>
            <van-col style="color: #9d9b9b; margin-top: 2px"
              >级别：{{ getTypeName(statics.manager.managerType) }}</van-col
            >
          </van-row>
          <van-row>
            <van-col style="color: #9d9b9b; margin-top: 2px"
              >电话：{{ statics.manager.tel }}</van-col
            >
          </van-row>
        </van-col>
      </van-row>
    </div>
    <div style="width: 100%; height: 20px; background-color: #f2f2f2"></div>
    <!-- <div style="background-color:#fff;">
            <van-row>
                <van-col offset="1"><span style="display:inline-block;font-size:16px;margin-top:10px;font-weight:bold;">数据统计</span></van-col>
            </van-row>
            <van-divider :style="{borderColor: '#E0E0E0', padding: '0 0 0 16px', margin:'10px 0 16px 0' }" />
            <van-row>
                <van-col offset="1" span="22" style="text-align:center;">
                    <span class="number">{{statics.userCount}}</span>
                    <span style="display:block;margin-bottom:10px;">用户数量(个)</span>
                </van-col>
            </van-row>
            <van-divider :style="{borderColor: '#E0E0E0', padding: '0 0 0 16px' }" />
            <van-row style="padding:20px 0;">
                <van-col offset="1" span="11" style="text-align:center;">
                    <span class="number">{{statics.orderCount}}</span>
                    <span style="display:block;">订单总量(个)</span>
                </van-col>
                <van-col span="11" style="text-align:center;">
                    <span class="number">{{statics.orderPrice}}</span>
                    <span style="display:block;">订单总金额(元)</span>
                </van-col>
            </van-row>
            <van-row style="padding:20px 0;">
                <van-col offset="1" span="11" style="text-align:center;">
                    <span class="number">{{statics.settledPrice}}</span>
                    <span style="display:block;">已结算金额(元)</span>
                </van-col>
                <van-col span="11" style="text-align:center;">
                    <span class="number">{{statics.unsettledPrice}}</span>
                    <span style="display:block;">未结算金额(元)</span>
                </van-col>
            </van-row>
        </div> -->
  </div>
</template>
<script>
import { Row, Col, Image, Divider, Toast } from 'vant';
import { managerDetail, getUserByManagerId } from '@/api/api';
export default {
  name: 'business-admin-detail',
  props: {
    managerId: [String, Number],
  },
  data() {
    return {
      total: '',
      user: {},
      manager: {},
      statics: {},
    };
  },
  created() {
    if (
      this.$route.query.managerId != null &&
      this.$route.query.managerId != undefined &&
      this.$route.query.managerId != ''
    ) {
      this.managerId = this.$route.query.managerId;
    }
    this.getManagerDetail();
  },
  watch: {
    $route() {
      if (
        this.$route.query.managerId != null &&
        this.$route.query.managerId != undefined &&
        this.$route.query.managerId != ''
      ) {
        this.managerId = this.$route.query.managerId;
      }
    },
  },
  methods: {
    getBackgroundColor(id) {
      return 'familynameColor' + (id % 10);
    },
    getTypeName(type) {
      if (type == 0) {
        return '销售经理';
      } else if (type == 1) {
        return '代理商';
      } else {
        return '联盟商';
      }
    },
    getManagerDetail() {
      managerDetail({ managerId: this.managerId })
        .then((res) => {
          this.statics = res.data.data;
          console.log(this.statics);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Image.name]: Image,
    [Divider.name]: Divider,
  },
};
</script>
<style lang="scss" scoped>
.familyname {
  display: inline-block;
  width: 67px;
  height: 67px;
  font-size: 40px;
  text-align: center;
  line-height: 67px;
  border-radius: 7px;
}

.number {
  display: block;
  color: #ee3f00;
  font-weight: bold;
  font-size: 20px;
  margin: 10px 0;
}
.familynameColor1 {
  background-color: #129b91;
  color: #fff;
}

.familynameColor2 {
  background-color: #07bace;
  color: #fff;
}

.familynameColor3 {
  background-color: #e92c6c;
  color: #fff;
}

.familynameColor4 {
  background-color: #2996eb;
  color: #fff;
}

.familynameColor5 {
  background-color: #ffa619;
  color: #fff;
}

.familynameColor6 {
  background-color: #4eb55a;
  color: #fff;
}

.familynameColor7 {
  background-color: #724abd;
  color: #fff;
}

.familynameColor8 {
  background-color: #07bace;
  color: #fff;
}

.familynameColor9 {
  background-color: #e92c6c;
  color: #fff;
}

.familynameColor0 {
  background-color: #2996eb;
  color: #fff;
}
</style>